<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item prop="hotelName">
        <el-input
          v-model.trim="list.filter.hotelName"
          placeholder="酒店名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item v-if="userInfo && userInfo.userType != 1" prop="merchantId">
        <KiSelect
          v-model="list.filter.merchantId"
          :options="localDict.merchantOpt"
          :search="queryListForNoPermission"
          :searchImmediately="false"
          :props="{
            label: 'name',
            value: 'id'
          }"
          placeholder="所属商户"
        />
      </el-form-item>

      <el-form-item prop="status">
        <Status v-model="list.filter.status" placeholder="酒店状态" />
      </el-form-item>
      <el-button
        @click="
          () => {
            $refs.listFilterRef.resetFields()
          }
        "
        >重置</el-button
      >
    </el-form>
    <div class="table-operation">
      <span>
        <AuthButton @click="add" name="新增" />
        <!-- <AuthButton
          @click="exportList"
          name="导出"
          :loading="loadingOfExport"
        /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/self-employed/export"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>
    <el-radio-group
      v-model="list.filter.reviewStatus"
      style="margin-bottom: 30px;"
    >
      <el-radio-button label="">全部</el-radio-button>
      <el-radio-button label="1"
        >待审核{{ radioOthers[1] | showBrackets }}</el-radio-button
      >
      <el-radio-button label="2"
        >审核未通过{{ radioOthers[2] | showBrackets }}</el-radio-button
      >
    </el-radio-group>
    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" />
      <el-table-column label="酒店名称" prop="hotelName" />
      <el-table-column label="所属商户" prop="merchantName" />
      <el-table-column label="类型" prop="hotelCategoryName" />
      <el-table-column label="电话" prop="telephone" />
      <el-table-column label="地区" align="center">
        <template slot-scope="{ row: { areaName, address } }">
          {{ areaName ? areaName.replace(/\//g, '') : '' }}{{ address }}
        </template>
      </el-table-column>
      <el-table-column label="商圈" prop="businessName" />
      <el-table-column label="星级" prop="hotelStarName" />
      <el-table-column label="房型数量" prop="roomTypeNum" />
      <el-table-column label="审核状态" prop="reviewStatusName" />
      <el-table-column label="酒店状态" prop="status">
        <template slot-scope="{ row: { id, status } }">
          <el-tag :type="status ? 'success' : 'danger' ">{{status ? '启用' : '停用'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" width="100">
      </el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="{ row: { hotelId, status, reviewStatus, hotelName, sort } }">
          <AuthButton @click="r({ id: hotelId })" name="查看" />
          <AuthButton
            @click="handleEdit({ id: hotelId }, reviewStatus)"
            name="编辑"
          />
          <!-- <AuthButton
            @click="handleChannel(hotelId, false)"
            name="授权酒店渠道"
            circle
            type="success"
          >
            <i class="el-icon-connection" />
          </AuthButton>
          <AuthButton
            @click="handleChannel(hotelId, true)"
            name="查看授权渠道"
            circle
            type="warning"
          >
            <i class="el-icon-connection" />
          </AuthButton> -->
          <AuthButton
            @click="satusBoxByHotelId = hotelId"
            :elPopconfirmProps="{ disabled: true }"
            :name="`${['启用', '停用'][status]}`"
            circle
          >
          </AuthButton>
          <AuthButton @click="d({ id: hotelId })" name="删除" />
          <AuthButton
            v-if="reviewStatus === '1'"
            @click="auditByHotelId = hotelId"
            name="审核"
            circle
            type="warning"
          >
            <i class="el-icon-view" />
          </AuthButton>
          <AuthButton
            v-if="reviewStatus === '2' || reviewStatus === '3'"
            @click="recordByHotelId = hotelId"
            name="审核记录"
            circle
            type="info"
          >
            <i class="el-icon-tickets" />
          </AuthButton>
          <AuthButton
            @click="handleBtnSort({ hotelId , hotelName , sort })"
            name="设置排序"
            circle
            type="el-icon-sort"
          >
            <i class="el-icon-tickets" />
          </AuthButton>
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      ref="formRef"
      :show.sync="form.show"
      :title="form.status | dialogTitle__"
      v-model="form.data"
      :readonly="form.status === 'r'"
      :loading="form.loading"
    >
      <template #el-form>
        <el-steps
          :active="activeOfStep"
          align-center
          finish-status="success"
          class="mb30"
        >
          <el-step
            v-for="(item, index) in listOfStep"
            :title="item"
            :key="index"
            @click.native="() => (activeOfStep = index)"
          />
        </el-steps>
        <div v-show="activeOfStep == 0">
          <el-form-item prop="hotelSubCategory" label="酒店类型" verify>
            <el-cascader
              ref="cascader"
              class="wFull"
              v-model="form.data.hotelSubCategory"
              :options="localDict.hotelType"
              :show-all-levels="false"
              :props="{
                emitPath: false,
                value: 'id'
              }"
              placeholder="请选择"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="酒店名称"
            prop="hotelName"
            :verify="{ minLength: 2 , maxLength: 20 }"
          >
            <el-input
              v-model="form.data.hotelName"
              maxlength="20"
              show-word-limit
              placeholder="请选择"
              clearable
            />
          </el-form-item>
          <el-form-item prop="hotelStar" label="酒店星级" verify>
            <KiSelect
              v-model="form.data.hotelStar"
              :options="dict.zy_hotel_star"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item prop="praciceDate" label="开业日期" verify>
            <el-date-picker
              class="wFull"
              value-format="yyyy"
              v-model="form.data.praciceDate"
              type="year"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item prop="fitmentDate" label="装修时间">
            <el-date-picker
              class="wFull"
              value-format="yyyy"
              v-model="form.data.fitmentDate"
              type="year"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item
            label="酒店电话"
            prop="telephone"
            :rules="[telOrPhone]"
            verify
          >
            <el-input
              v-model="form.data.telephone"
              placeholder="请输入手机号或座机号"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="紧急联系手机"
            prop="emergencyPhone"
            :verify="{ type: 'phone' }"
          >
            <el-input
              v-model="form.data.emergencyPhone"
              placeholder="请输入手机号"
              clearable
            />
          </el-form-item>
          <el-form-item prop="areaCode" label="所属地区" verify>
            <AllRegionSelect
              v-model="form.data.areaCode"
              :pathLabel.sync="form.data.areaName"
              :props="{ checkStrictly: true }"
              placeholder="请选择"
              @change="queryPostCodeByAreaCode"
            />
          </el-form-item>
          <el-form-item prop="address" label="所在位置" verify>
            <el-col :span="4">
              <el-button @click="showCoordPicker = true" type="primary" plain>地图选点</el-button>
              <CoordPicker
                :show.sync="showCoordPicker"
                :lng.sync="form.data.longitude"
                :lat.sync="form.data.latitude"
                :address.sync="form.data.address"
                :city="form.data.areaCode"
              />
            </el-col>
            <el-col :span="20">
              <el-input v-model="form.data.address" disabled />
            </el-col>
          </el-form-item>
          <el-form-item label="坐标" verify>
            <el-col :span="11">
              <el-form-item prop="longitude" verify>
                <el-input
                  v-model="form.data.longitude"
                  placeholder="经度"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-form-item prop="latitude" verify>
                <el-input
                  v-model="form.data.latitude"
                  placeholder="纬度"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <!-- <el-form-item
            label="所属商圈"
            prop="businessName"
          >
            <el-input
              v-model="form.data.businessName"
              show-word-limit
              placeholder="请输入"
              clearable
            />
          </el-form-item> -->
          <el-form-item label="酒店邮编" prop="postCode" verify>
            <el-input v-model="form.data.postCode" show-word-limit clearable />
          </el-form-item>
          <el-form-item label="入离时间" verify>
            <el-col :span="11">
              <el-form-item prop="checkinDate" verify>
                <el-time-select
                  placeholder="最早入住时间"
                  v-model="form.data.checkinDate"
                  :picker-options="{
                    start: '08:00',
                    step: '00:60',
                    end: '18:00'
                  }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-form-item prop="checkoutDate" verify>
                <el-time-select
                  placeholder="最晚离店时间"
                  v-model="form.data.checkoutDate"
                  :picker-options="{
                    start: '09:00',
                    step: '00:60',
                    end: '16:00'
                  }"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="最晚入住时间" prop="latestCheckinTime" verify>
            <KiSelect v-model="form.data.latestCheckinTime" :options="latestCheckinTimeList" placeholder="请输入最晚入住时间" />
          </el-form-item>
          <!-- <el-form-item label="平台手续费" prop="plateformCharge" :verify="{ type: 'int' , gte: 0 , lte: 100 }">
            <el-input v-model="form.data.plateformCharge" maxlength="2" clearable>
              <span slot="suffix">%</span>
            </el-input>
          </el-form-item> -->
        </div>
        <div v-if="activeOfStep == 1">
          <el-form-item label="富文本" prop="info" :verify="{ minLength : 50 }">
            <MiniMCE v-model="form.data.info" :disabled="form.status === 'r'"/>
          </el-form-item>
        </div>
        <div v-show="activeOfStep == 2">
          <el-form-item
            v-for="(item, index) in form.data.hotelImages"
            :key="item.key"
            :label="typeToNameOfImageMap(item.typeId)"
            :prop="'hotelImages.' + index + '.url'"
            :verify="['1', '2', '3', '4'].includes(item.typeId) ? {} : undefined"
          >
            <Imgpond
              :class="
                ['2', '3', '4'].includes(item.typeId)
                  ? 'afterA'
                  : ['1'].includes(item.typeId)
                  ? 'afterC'
                  : 'afterB'
              "
              v-model="item.url"
              valueType="array"
              :count="item.typeId === '1' ? 1 : 9"
            />
            <form-item-tip>建议图片尺寸：宽1000~2000，高1200 </form-item-tip>
          </el-form-item>
        </div>
        <div v-show="activeOfStep == 3">
          <div>
            <h4>停车场</h4>
            <div class="exhibition-a">
              <span
                v-for="(item, index) in parking"
                :key="index"
                class="title"
                >{{ item }}</span
              >
              <div class="content">
                <span>
                  <el-checkbox v-model="form.data.services[0].selected"
                    >停车场</el-checkbox
                  >
                </span>
                <span>
                  <KiSelect
                    v-model="form.data.services[0].position"
                    :options="localDict.parkingLtems"
                  />
                </span>
                <span>
                  <KiSelect
                    v-model="form.data.services[0].reservation"
                    :options="localDict.parkingSpace"
                  />
                </span>
                <span>
                  <KiSelect
                    v-model="form.data.services[0].type"
                    :options="localDict.parkingReserve"
                  />
                </span>
                <span>
                  <KiSelect
                    v-model="form.data.services[0].charge"
                    :options="localDict.parkingType"
                  />
                </span>
              </div>
            </div>
          </div>
          <template v-for="(item, groupName) in detailedList">
            <allCheckbox
              :title="groupName"
              :list="item"
              :checkedList.sync="form.data.checkedObj[groupName]"
              :key="groupName"
            ></allCheckbox>
          </template>

          <!-- <div
            v-for="item, groupName in detailedList"
            :key="groupName"
          >
            <div>
              <h4>{{ groupName }}</h4>
            </div>
            <div class="exhibition-b">
              <span
                class="title"
                v-for="num, index in [1, 2, 3]"
                :key="index"
              >服务项目</span>
              <el-checkbox-group v-model="form.data.facilities">
                <el-checkbox
                  :style="{'display': i.itemName ? '' : 'none'}"
                  v-for="i in item"
                  :label="i.itemNo"
                  :key="i.itemNo"
                >
                  <div class="selfLabel">{{i.itemName}}</div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div> -->
        </div>
      </template>
      <div slot="footer" class="footer">
        <el-button v-if="activeOfStep !== 0" class="upper" @click="upper">上一步</el-button>
        <el-button
          v-if="form.status !== 'r' && activeOfStep === listOfStep.length - 1"
          class="next"
          type="primary"
          :loading="loadingOfSubmit"
          @click="submit"
          >提交申请</el-button
        >
        <div v-else>
          <el-button
            v-if="activeOfStep !== listOfStep.length - 1"
            class="next"
            type="primary"
            @click="next"
            >下一步</el-button
          >
        </div>
      </div>
    </KiFormDialog>

    <!-- <Channel
      v-if="channelByHotelId"
      :readonly="channelByreadonly"
      :id="channelByHotelId"
      @clearHotelId="channelByHotelId = null"
    ></Channel> -->
    <Audit
      v-if="auditByHotelId"
      :id="auditByHotelId"
      @clearHotelId="auditByHotelId = null"
      @refresh="refresh"
    ></Audit>
    <Record
      v-if="recordByHotelId"
      :id="recordByHotelId"
      @clearHotelId="recordByHotelId = null"
    ></Record>
    <SatusBox
      v-if="satusBoxByHotelId"
      :id="satusBoxByHotelId"
      @clearHotelId="satusBoxByHotelId = null"
      @refresh="refresh"
    />

    <!-- 二维码 -->
    <QrCodePreview ref="qrCode" />

    <KiFormDialog
      :show.sync="setSortForm.show"
      title="设置展示顺序"
      v-model="setSortForm.data"
      width="35%"
      ref="sortRef"
    >
      <template #el-form>
        <el-form-item label="酒店名称" prop="hotelName" verify>
          <el-input
            v-model="setSortForm.data.hotelName"
            disabled
          />
        </el-form-item>
        <el-form-item label="展示顺序" prop="sort" verify>
          <Sort 
            v-model="setSortForm.data.sort" 
            :max="100000"
            placeholder="请输入展示顺序"
          />
        </el-form-item>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleSetSortOk"
          :loading="setSortForm.loading"
        >确 定</el-button>
      </div>
    </KiFormDialog>

  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { mapGetters } from 'vuex'
import { isEmpty } from '@/utils'
const phone = (value) => {
  let errInfo = ''
  if (typeof value === 'number' && Number.isNaN(value)) {
    errInfo = '格式不正确'
  } else if (notEmpty(value)) {
    value = value.toString()
    if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
      errInfo = '格式不正确'
    }
  }

  return errInfo
}

// import Channel from './components/Channel'
import Audit from './components/Audit'
import Record from './components/Record'
import SatusBox from './components/SatusBox'
import allCheckbox from './components/all-checkbox'
import QrCodePreview from '@/components/QrCodePreview'

export default {
  mixins: [pageMixin],
  setup: () => useAdmateAdapter(
    {
      urlPrefix: 'sot-admin-api/hotel/self-employed',
      list: {
        filter: {
          reviewStatus: ''
        }
      },
      form: {
        data: {
          longitude: null,
          latitude: null,
          hotelImages: [
            { typeId: '1', url: [] }, // 主图封面
            { typeId: '2', url: [] }, // 酒店外观
            { typeId: '3', url: [] }, // 公共区域
            { typeId: '4', url: [] }, // 周边
            { typeId: '5', url: [] }, // 餐饮
            { typeId: '6', url: [] }, // 休闲
            { typeId: '7', url: [] }, // 商务
            { typeId: '8', url: [] } // 其他
          ],
          facilities: [],
          checkedObj: {},
          services: [
            {
              selected: false,
              position: '',
              reservation: '',
              type: '',
              charge: ''
            }
          ]
        },
        show: false,
        status: 'c'
      },
    }, 
    {
      afterRetrieve() {
        this.retrieve()
      },
    }
  ),
  computed: {
    ...mapGetters(['userInfo'])
  },
  components: { 
    // Channel, 
    Audit, Record, SatusBox, 
    QrCodePreview, 
    allCheckbox 
  },
  // 自营酒店
  filters: {
    showBrackets (v) {
      return Number(v) > 0 ? `(${v})` : ''
    }
  },
  watch: {
    'form.show': {
      handler (newV) {
        if (newV) {
          this.activeOfStep = 0
        }
      }
    },
    'list.filter': {
      handler (newV) {
        this.queryCountByReviewStatus(newV)
      },
      deep: true
    },
    'form.data.hotelSubCategory': {
      handler (newV) {
        if (!newV) return false
        this.$nextTick(_ => {
          if (this.$refs.cascader) {
            this.form.data.hotelCategory = this.$refs.cascader?.getCheckedNodes()[0]?.parent?.value
          }
        })
      }
    },
    /**
     * areaCode变化时清除经纬度，直接在RegionSelect的change事件上执行，会导致查询到的经纬度被清空
     * @author: wang pingqi
     */
     "form.data.areaCode": {
      handler(nv,ov) {
        if (nv && ov && nv!=ov ){
          this.$set(this.form.data,'longitude',null);
          this.$set(this.form.data,'latitude',null);
        }
      },
      deep: true,
    },
  },
  data () {
    return {
      telOrPhone: {
        required: true,
        validator: (rule, value, callback) => {
          let errInfo = ''
          if (isEmpty(value)) {
            errInfo = '必填项'
          } else if (
            Boolean(!/^0\d{2,3}-?\d{7,8}$/.test(value)) || 
            Boolean(phone(value))
          ) {
            errInfo = '手机号或座机号格式不正确'
          }
          callback(errInfo ? new Error(errInfo) : undefined)
        }
      },
      activeOfStep: 0,
      listOfStep: ['基本信息', '图文详情', '图片管理', '设施设备'],
      loading: false,
      loadingOfExport: false,
      loadingOfSubmit: false,
      showOfDisassociate: false,
      formDialog: {},
      radioOthers: [null, 0, 0],
      radioValue: '0',
      showCoordPicker: false,
      curScenic: {},
      localDict: {
        hotelType: [],
        merchantOpt: [],
        parkingLtems: [
          { dataName: '酒店附近', dataValue: '酒店附近' },
          { dataName: '酒店内', dataValue: '酒店内' }
        ],
        parkingSpace: [
          { dataName: '需要提前预定', dataValue: '需要提前预定' },
          { dataName: '无需预定', dataValue: '无需预定' },
          { dataName: '无法提前预定', dataValue: '无法提前预定' }
        ],
        parkingReserve: [
          { dataName: '私人停车场', dataValue: '私人停车场' },
          { dataName: '公共停车场', dataValue: '公共停车场' }
        ],
        parkingType: [
          { dataName: '收费', dataValue: '收费' },
          { dataName: '有可能收取费用', dataValue: '有可能收取费用' },
          { dataName: '免费', dataValue: '免费' }
        ]
      },
      detailedList: [],
      parking: ['服务项目', '位置', '是否预定', '类型', '是否收费'],
      channelByHotelId: null,
      auditByHotelId: null,
      recordByHotelId: null,
      satusBoxByHotelId: null,
      oldAreaCode: '',
      channelByreadonly: true,
      checkboxList: [],
      latestCheckinTimeList: [
        { dataName: '18:00', dataValue: '18:00' },
        { dataName: '19:00', dataValue: '19:00' },
        { dataName: '20:00', dataValue: '20:00' },
        { dataName: '21:00', dataValue: '21:00' },
        { dataName: '22:00', dataValue: '22:00' },
        { dataName: '23:00', dataValue: '23:00' },
        { dataName: '次日00:00', dataValue: '00:00' },
        { dataName: '次日01:00', dataValue: '01:00' },
        { dataName: '次日02:00', dataValue: '02:00' },
        { dataName: '次日03:00', dataValue: '03:00' },
        { dataName: '次日04:00', dataValue: '04:00' },
        { dataName: '次日05:00', dataValue: '05:00' },
        { dataName: '次日06:00', dataValue: '06:00' }
      ],
      // 设置展示顺序
      setSortForm : {
        loading : false,
        show : false,
        data : {
          hotelId : undefined ,
          sort : undefined
        }
      }
    }
  },
  mounted () {
    // 酒店类型数据源
    this.$POST('sot-admin-api/hotel/self-multi/getSelfHotelTree?groupName=酒店分类').then(_ => {
      this.localDict.hotelType = _.data ?? []
    })
    // 酒店所有设施设备
    this.$POST('sot-admin-api/hotel/self-dict-data/queryForListByGroup', {
      dictCode: 'hotelFacilities'
    }).then(_ => {
      this.detailedList = _.data ?? []
    })
  },
  methods: {
    // 点击“设置排序”按钮
    handleBtnSort(row){
      this.$set(this.setSortForm,"show",true)
      this.$set(this.setSortForm,"data",row)
    },
    // 提交“设置排序”
    handleSetSortOk(){
      this.$refs.sortRef.$refs.elForm.validate(valid => {
        if (valid) { 
          const opts= {
            hotelId: this.setSortForm.data.hotelId,
            sort : this.setSortForm.data.sort,
          }
          this.$set(this.setSortForm,"loading",true)
          this.$POST('sot-admin-api/hotel/self-employed/updateSort', opts).then( () => {
            this.$swal.success("设置排序成功")
            this.$set(this.setSortForm,"show",false)
            this.getList()
          }).finally(_ => {
            this.$set(this.setSortForm,"loading",false)
          })
        }
      })
    },
    queryListForNoPermission (name) {
      // 所属商户
      this.$POST(
        'sot-admin-api/merchant/merchant/queryListForNoPermission',
        { name: name }
      ).then(_ => {
        this.localDict.merchantOpt = _.data
      })
    },
    handleChannel (hotelId, Boo) {
      this.channelByreadonly = Boo
      this.channelByHotelId = hotelId
    },
    // exportList () {
    //   this.loadingOfExport = true
    //   this.$download('sot-admin-api/hotel/self-employed/export', this.list.filter, {
    //     method: 'POST'
    //   }).finally(e => {
    //     this.loadingOfExport = false
    //   })
    // },
    submit () {
      this.$refs.formRef.$refs.elForm.validate(valid => {
        if (valid) {
          this.loadingOfSubmit = true

          // 整合多选
          this.form.data.facilities = []
          Object.keys(this.form.data.checkedObj).forEach(key =>
            this.form.data.facilities.push(...this.form.data.checkedObj[key])
          )
          this.submitForm()
            .then(_ => {
              this.form.show = false
              this.queryCountByReviewStatus()
            })
            .finally(_ => {
              this.loadingOfSubmit = false
            })
        } else {
          this.$swal.error('验证失败,请检查所填写项')
        }
      })
    },
    regular (f, c = null) {
      let o = {
        required: true,
        validator: (rule, value, callback) => {
          let errInfo = ''
          if (isEmpty(value)) {
            errInfo = '必填项'
          } else {
            errInfo = f(value, c)
          }
          callback(errInfo ? new Error(errInfo) : undefined)
        }
      }
      return o
    },
    next () {
      if (this.activeOfStep++ > this.listOfStep.length - 2) {
        this.activeOfStep = 0
      }
    },
    upper () {
      if (this.activeOfStep-- <= 0) this.activeOfStep = 0
    },
    retrieve() {

      this.dataSplitGroup(this.form.data.facilities, this.detailedList)
      this.oldAreaCode = ''
      if (this.form.status === 'u') {
        // 处理酒店邮编字段
        this.oldAreaCode = this.form.data.areaCode
        // 处理设施设备
        this.form.data.facilities = this.form.data.facilities ?? []
        // 处理图片管理
        let A = ['1', '2', '3', '4', '5', '6', '7', '8'] // 新建typeId父集
        let B =
          this.form.data.hotelImages.map(res => {
            return res.typeId
          }) ?? [] // 子集
        let C = this.$lo.differenceBy(A, B) // 补集
        if (C && C.length > 0) {
          C.map(val => {
            let o = { typeId: val , url: [] }
            this.form.data.hotelImages.push(o)
          })
        }
      } else if (this.form.status === 'r') {
        // 处理酒店邮编字段
        this.oldAreaCode = this.form.data.areaCode
      }
    },
    handleEdit (par, reviewStatus) {
      if (reviewStatus === '2' || reviewStatus === '3') {
        const h = this.$createElement
        this.$msgbox({
          customClass: 'hotel-msgbox',
          title: '修改须知',
          message: h('div', null, [
            h(
              'p',
              null,
              '酒店信息由基本信息、图文详情、图片管理及设施设备组成。 '
            ),
            h(
              'p',
              null,
              '当基本信息发生修改时，将重新发起审核。需待平台管理员审核通过后信息方能更新。'
            )
          ]),
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(_ => this.u(par))
      } else {
        this.u(par)
      }
    },
    queryPostCodeByAreaCode (areaCode) {
      if (this.oldAreaCode && this.oldAreaCode === areaCode) return false
      this.$POST(`/sot-admin-api/hotel/self-employed/queryPostCodeByAreaCode/${areaCode}`)
        .then(_ => {
          this.$set(this.form.data, 'postCode', _.data)
        })
        .catch(_ => {
          this.$set(this.form.data, 'postCode', '')
        })
    },
    typeToNameOfImageMap (type) {
      const o = {
        1: '主图封面',
        2: '酒店外观',
        3: '公共区域',
        4: '周边',
        5: '餐饮',
        6: '休闲',
        7: '商务',
        8: '其他'
      }
      return o[type]
    },
    queryCountByReviewStatus (par = this.list.filter) {
      let o = this.$lo.cloneDeep(par)
      if (o && o.reviewStatus) {
        delete o.reviewStatus
      }
      this.$POST('sot-admin-api/hotel/self-employed/queryCountByReviewStatus', o)
        .then(_ => {
          this.radioOthers = []
          //  _.data返回(1待审核 2审核未通过 3审核通过)
          this.radioOthers[1] = _.data[1]
          this.radioOthers[2] = _.data[2]
        })
        .catch(_ => {
          this.radioOthers = [null, 0, 0]
        })
    },
    refresh () {
      this.getList()
      this.queryCountByReviewStatus()
    },
    dataSplitGroup (list, dict) {
      let obj = {}
      let dict_ = this.$lo.cloneDeep(dict)

      Object.keys(dict_).map(key => {
        dict_[key] = dict_[key].map(d => d.itemNo)
      })

      list.map(item => {
        for (let key in dict_) {
          if (dict_[key].includes(item)) {
            obj[key] || (obj[key] = [])
            obj[key].push(item)
            break
          }
        }
      })

      this.form.data.checkedObj = obj
    },
    add () {
      this.$POST(`sot-admin-api/hotel/self-employed/checkMerchantStatus`).then(({ errorCode }) => {
        if (errorCode == '00000') this.c()
      })
    }
  }
}
</script>
<style>
.hotel-msgbox {
  width: 612px !important;
}
</style>
<style lang="scss" scoped>
@mixin afterToImgpond($text) {
  :deep(.el-upload) {
    position: relative;
    &::after {
      content: $text;
      position: absolute;
      right: 50%;
      bottom: 0;
      height: 100px;
      line-height: 100px;
      width: max-content;
      font-size: 12px;
      color: #ccc;
      transform: translate(50%,25%);
    }
  }
}
.afterA {
  @include afterToImgpond('必传1张，可传9张');
}
.afterB {
  @include afterToImgpond('可传9张');
}
.afterC {
  @include afterToImgpond('必传1张');
}
:deep(.picker) {
  .date-range {
    > div {
      width: 100% !important;
    }
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: inherit;
  }
}
.exhibition-a {
  border: 1px solid #ebeef5;
  .title {
    display: inline-block;
    width: 20%;
    height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 5px;
    &:nth-child(-n + 5) {
      background: rgba(204, 204, 204, 0.1);
    }
  }
  .content {
    display: flex;
    word-wrap: break-word;
    flex-wrap: wrap;
    > span {
      width: 20%;
      height: 48px;
      line-height: 48px;
      text-align: center;
      padding: 0 5px;
    }
  }
}
.exhibition-b {
  border: 1px solid #ebeef5;
  .title {
    display: inline-block;
    width: 33.33%;
    height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 5px;
    &:nth-child(-n + 3) {
      background: rgba(204, 204, 204, 0.1);
    }
  }
  .el-checkbox-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .el-checkbox {
    display: flex;
    align-items: center;
    width: 33.33%;
    min-height: 48px;
    line-height: 48px;
    text-align: center;
    white-space: inherit;
    margin-right: 0;
    padding-left: 27px;
    .selfLabel {
      width: 180px;
    }
  }
}
.URL-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.url-icon {
  font-size: 18px;
  line-height: 36px;
  padding-left: 20px;
  .url-QR {
    transition: all 0.5s;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
  }
  &:hover {
    .url-QR {
      transition: all 0.5s;
      width: 200px !important;
      height: 200px !important;
    }
  }
}

.footer {
  display: block;
  width: 100%;
  height: 56px;
  padding: 20px 40px 0 !important;
  display: flex;
  flex-direction: row;
  // .upper {
  //   float: left;
  // }
  .next {
    // float: right;
    margin-left:18px;
  }
}
</style>
